<template>
  <div class="_wz_cent_main _wz_deptLearnDetails">
    <table cellpadding="0" cellspacing="0" border="0">
      <colgroup>
        <col width="9%">
        <col width="20%">
        <col width="9%">

        <col width="9%">
        <col width="9%">

        <col width="9%">
        <col width="35%">
      </colgroup>
      <tbody>
      <tr>
        <td style="font-weight: 600;position:relative;" colspan="7">学习详情</td>
      </tr>
      <tr>
        <td style="text-align: right;background: #fafafa;">从业人员</td>
        <td>{{!!selectData.trainProgramPersonName ? selectData.trainProgramPersonName:'--'}}</td>
        <td style="text-align: right;background: #fafafa;">身份证号</td>
        <td colspan="2">{{!!selectData.trainProgramPersonIdentifyNum ? selectData.trainProgramPersonIdentifyNum:'--'}}</td>
        <td style="text-align: right;background: #fafafa;">运输企业</td>
        <td>{{!!selectData.deptName ? selectData.deptName:'--'}}</td>
      </tr>
      <tr>
        <td style="text-align: right;background: #fafafa;">课程培训</td>
        <td>{{!!selectData.trainProgramName ? selectData.trainProgramName:'--'}}</td>
        <td style="text-align: right;background: #fafafa;">证书编号</td>
        <td colspan="2">{{!!selectData.trainProgramPersonCertificateNo ? selectData.trainProgramPersonCertificateNo:'--'}}</td>
        <td style="text-align: right;background: #fafafa;">证书类型</td>
        <td>{{!!selectData.trainProgramPersonCertificateType ? selectData.trainProgramPersonCertificateType:'--'}}</td>
      </tr>
      <template v-for="item in trainProgramDeptPersonTopicPageList">
        <tr>
          <td style="text-align: right;background: #fafafa;">课题素材</td>
          <td>{{!!item.trainMaterialName ? item.trainMaterialName:'--'}}</td>
          <td style="text-align: right;background: #fafafa;">素材类型</td>
          <td colspan="2">{{!!item.trainMaterialTransportTypeName ? item.trainMaterialTransportTypeName:'--'}}</td>
          <td style="text-align: right;background: #fafafa;">完成状态</td>
          <td>
            <Tag color="primary" v-if="!!item.trainProgramPersonTopicFinish">已完成</Tag>
            <Tag color="error" v-else>未完成</Tag>
          </td>
        </tr>
        <tr>
          <td style="text-align: right;background: #fafafa;">素材时长</td>
          <td>{{!!item.trainMaterialDuration ? item.trainMaterialDuration:0}} 分钟</td>
          <td style="text-align: right;background: #fafafa;">学习进度</td>
          <td>{{!!item.trainProgramPersonTopicProcess ? item.trainProgramPersonTopicProcess:0}} 分钟</td>
          <td style="text-align: right;background: #fafafa;">学习时间</td>
          <td colspan="2">
            {{!!item.trainProgramPersonTopicBeginTime ? item.trainProgramPersonTopicBeginTime:'--'}} -
            {{!!item.trainProgramPersonTopicEndTime ? item.trainProgramPersonTopicEndTime:'--'}}
          </td>
        </tr>
        <tr>
          <td style="text-align: right;background: #fafafa;">学习图片</td>
          <td colspan="2">
            <template v-for="items in item.trainProgramDeptPersonImgList">
              <div style="width: 124px;overflow: hidden;display: inline-block;margin-right: 4px;">
                <div class="_wz_insertimage" style="display: block;width: 100%;height: 130px;">
                  <viewer style="width: 100%;height: 100%;">
                    <img :src="apiUrl.imgUrl+items.imgUrl" @error="public.imgDispose" />
                  </viewer>
                </div>
              </div>
            </template>
          </td>
          <td style="text-align: right;background: #fafafa;">学习摘要</td>
          <td colspan="3" style="padding: 10px;">
            <div style="height: 300px;overflow: auto;">
              <Timeline>
                <template v-for="items in item.trainProgramDeptPersonSummaryList">
                  <TimelineItem>
                    <p class="content">
                      {{items.createTime}} &emsp;
                      {{items.summary}}&emsp;
                      学习位置:
                      <span v-if="!!items.positionDescription">【{{items.positionDescription}}】</span>
                      <span v-else>暂无学员培训摘要信息</span></p>
                  </TimelineItem>
                </template>
              </Timeline>
            </div>
          </td>
        </tr>
      </template>
      </tbody>
    </table>
    <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>
<script>
export default {
  props: ['selectData'],//接收来自父组件的数据
  data() {
    return {
      spinShow:false,
      trainProgramDeptPersonTopicPageList:[],
    }
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    let that = this;
    that.spinShow = true;
    that.axios.post(that.apiUrl.trainTrainProgramDeptPersonTrainProgramDeptPersonTopicPageList, {trainProgramDeptPersonUuid: that.selectData.uuid}).then(res => {
      that.spinShow = false;
      if (!!res) {
        let trainProgramDeptPersonTopicPageList = res.data.data
        trainProgramDeptPersonTopicPageList.forEach(function (k, i) {
          that.learningDetails(k,i)
        })
        that.trainProgramDeptPersonTopicPageList = trainProgramDeptPersonTopicPageList;
      }
    }).catch(err => {
      console.log('失败', err);
    })
  },
  methods: {//执行的方法
    learningDetails(data,index){//课题摘要列表   课题图片列表
      let that = this;
      //查询培训课程课题摘要列表
      //课题图片列表
      that.axios.post(that.apiUrl.trainTrainProgramDeptPersonTrainProgramDeptPersonImgList, {trainProgramDeptPersonTopicUuid: data.uuid}).then(res => {
        if (!!res) {
          let obj = that.trainProgramDeptPersonTopicPageList[index];
          obj.trainProgramDeptPersonImgList = res.data.data;
          that.$set(that.trainProgramDeptPersonTopicPageList, index,obj)//赋值
          // data.trainProgramDeptPersonImgList = res.data.data;
        }
      }).catch(err => {
        console.log('失败', err);
      })

      that.axios.post(that.apiUrl.trainTrainProgramDeptPersonTrainProgramDeptPersonSummaryList, {trainProgramDeptPersonTopicUuid: data.uuid}).then(res => {
        if (!!res) {
          let obj = that.trainProgramDeptPersonTopicPageList[index];
          obj.trainProgramDeptPersonSummaryList = res.data.data;
          that.$set(that.trainProgramDeptPersonTopicPageList, index,obj)//赋值
          // data.trainProgramDeptPersonSummaryList = res.data.data;//赋值
        }
      }).catch(err => {
        console.log('失败', err);
      })




    },


  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_deptLearnDetails{
  table {
    table-layout:fixed;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 12px !important;

    td {
      min-width: 0;
      height: 40px;
      box-sizing: border-box;
      text-align: left;
      text-overflow: ellipsis;
      border: 1px solid #515a6e;
      padding: 0 10px;
      word-break: break-word;
      ._wz_insertimage {
        display: inline-block;
        width: 200px;
        height: 140px;
        text-align: center;
        line-height: 140px;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        border: 1px solid rgba(0, 0, 0, .2);
        margin-right: 4px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
